import {Cascader} from "antd";
import {CommonComponentProps} from "../../../../components/editor/interface.ts";
import FormItem from "antd/es/form/FormItem";
import {useDrag} from "react-dnd";
import {CSSProperties} from "react";
import {removeSetter} from "../../../utils/removeSetter.ts";
import {MoveDrop} from "../../../hooks/useMoveDrop.tsx";

export interface CascaderProps extends CommonComponentProps {
    id: number;
    name: string;
    styles?: CSSProperties;
    parentId: number;
    children?: any;
    options: any[],
    disabled:boolean
    multiple:boolean
    allowClear:boolean
    showSearch:boolean
    placeholder:string
    placement:any[]
    expandTrigger:any
    maxTagCount:number
    EditData:any[]
}

const CascaderDev = (props:CascaderProps) => {
    const { id,name,styles,label,rule } = props

    const ComponentProps = removeSetter({...props},["children","parentId"])

    const [_,drag] = useDrag({
        type:"Cascader",
        item:{
            id,
            type:name,
            dragType:"move",
        }
    })

    return (
        <div className={'relative'}  data-component-id={id} ref={drag} style={styles}>
            <MoveDrop key={name} dropComponentId={id} parentId={props.parentId}  />
            <FormItem>
                <FormItem  label={label} name={name} rules={rule} style={{margin:"0",...styles}}>
                    <Cascader {...ComponentProps as any}  />
                </FormItem>
            </FormItem>

        </div>
    );
};

export default CascaderDev;